<template>
  <div class="strut-div" id="3dMap"></div>
</template>

<script>
  import echarts from 'echarts';
  import echartsGL from 'echarts-gl'
  export default {
    data() {
      return {
        chart: null,
        option: null,
      }
    },
    methods: {
      init3dMap() {
        console.log("3D地图");

        this.chart = echarts.init(document.getElementById('3dMap'));

        this.$axios.get('../static/flights.json').then((res) => {
          function getAirportCoord(idx) {
            return [res.data.airports[idx][3], res.data.airports[idx][4]];
          }
          var routes = res.data.routes.map(function(airline) {
            return [
              getAirportCoord(airline[1]),
              getAirportCoord(airline[2])
            ];
          });

          this.chart.setOption({
            globe: {
              baseTexture: '../static/world.topo.bathy.200401.jpg',
              heightTexture: '../static/asset/bathymetry_bw_composite_4k.jpg',

              shading: 'realistic',
              globeRadius: 80,
              globeOuterRadius: 110,
              light: {
                ambient: {
                  intensity: 0.4
                },
                main: {
                  intensity: 0.4
                }
              },

              viewControl: {
                autoRotate: true,
                targetCoord: [85.46, 20],
                autoRotateSpeed: 2
              },
            },
            series: {

              type: 'lines3D',

              coordinateSystem: 'globe',

              blendMode: 'lighter',

              lineStyle: {
                width: 1,
                color: 'rgb(50, 50, 150)',
                opacity: 0.2
              },
              effect: {
                show: true,
                trailWidth: 2,
                trailLength: 0.2,
                constantSpeed: 10,
              },
              data: routes
            }
          });


        })
      }
    },
    mounted() {
      // this.init3dMap();
    }
  }
</script>

<style>
</style>
